<template>

  <!--搜索表单-->
  <a-form layout="inline" :model="searchParams" @finish="doSearch">
    <a-form-item label="问题标题">
      <a-input v-model:value="searchParams.title" placeholder="输入问题" allow-clear/>
    </a-form-item>
    <a-form-item label="问题id">
      <a-input v-model:value="searchParams.id" placeholder="输入问题id" allow-clear/>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">搜索</a-button>
    </a-form-item>
  </a-form>
  <!--    表单-->
  <a-table
    :columns="columns"
    :data-source="dataList"
    :pagination="pagination"
    @change="doTableChange"
  >
    <template #bodyCell="{ column, record }">

      <template v-if="column.dataIndex === 'createTime'">
        {{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss') }}
      </template>

      <template v-else-if="column.slotName === 'optional'">
          <a-button type="primary" @click="doUpdate(record)"> 修改</a-button>
          <a-button status="danger" @click="doDelete(record)">删除</a-button>
      </template>

      <template v-else-if="column.dataIndex === 'tags'">
        <a-tag color="blue" v-for="tag in JSON.parse(record.tags || '[]')" :key="tag">{{ tag }}</a-tag>
      </template>

      <template v-else-if="column.dataIndex === 'judgeConfig'">
        <div class="judge-config">
          <template v-if="record.judgeConfig">
            <div class="config-item">
              <span class="config-label">时间限制:</span>
              <span class="config-value">{{ JSON.parse(record.judgeConfig).timeLimit }}ms</span>
            </div>
            <div class="config-item">
              <span class="config-label">内存限制:</span>
              <span class="config-value">{{ JSON.parse(record.judgeConfig).memoryLimit }}MB</span>
            </div>
            <div class="config-item">
              <span class="config-label">堆栈限制:</span>
              <span class="config-value">{{ JSON.parse(record.judgeConfig).stackLimit }}MB</span>
            </div>
          </template>
          <span v-else>-</span>
        </div>
      </template>

      <template v-else-if="column.dataIndex === 'judgeCase'">
        <div class="judge-case">
          <template v-if="record.judgeCase">
            <div v-for="(testCase, index) in JSON.parse(record.judgeCase)" :key="index" class="case-item">
              <div class="case-header">用例 {{index + 1}}</div>
              <div class="case-content">
                <div class="case-row">
                  <span class="case-label">输入:</span>
                  <span class="case-value">{{testCase.input}}</span>
                </div>
                <div class="case-row">
                  <span class="case-label">输出:</span>
                  <span class="case-value">{{testCase.output}}</span>
                </div>
              </div>
            </div>
          </template>
          <span v-else>-</span>
        </div>
      </template>

    </template>

  </a-table>

</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { useRouter } from "vue-router";
import { deleteQuestionUsingPost, listQuestionByPageUsingPost } from '@/api/questionController.ts'
import { message } from 'ant-design-vue'
import Question = API.Question
import dayjs from 'dayjs'



const dataList = ref([]);
const total = ref(0);

// 搜索条件
const searchParams = reactive<API.QuestionQueryRequest>({
  current: 1,
  pageSize: 10,
  sortField: 'createTime',
  sortOrder: 'ascend',
})
const loadData = async () => {
  const res = await listQuestionByPageUsingPost({ ...searchParams}

  );
  if (res.data.data) {
    dataList.value = res.data.data.records ?? [];
    total.value = res.data.data.total ?? 0;
  } else {
    message.error("加载失败，" + res.data.message);
  }
};

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData();
});

// {id: "1", title: "A+ D", content: "新的题目内容", tags: "["二叉树"]", answer: "新的答案", submitNum: 0,…}

const columns = [
  {
    title: "id",
    dataIndex: "id",
  },
  {
    title: "标题",
    dataIndex: "title",
  },
  {
    title: "内容",
    dataIndex: "content",
  },
  {
    title: "标签",
    dataIndex: "tags",
  },
  {
    title: "答案",
    dataIndex: "answer",
  },
  {
    title: "提交数",
    dataIndex: "submitNum",
  },
  {
    title: "通过数",
    dataIndex: "acceptedNum",
  },
  {
    title: "判题配置",
    dataIndex: "judgeConfig",
  },
  {
    title: "判题用例",
    dataIndex: "judgeCase",
  },
  {
    title: "用户id",
    dataIndex: "userId",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
  },
  {
    title: "操作",
    slotName: "optional",
  },
];

const doDelete = async (question: Question) => {
  const res = await deleteQuestionUsingPost({
    id: question.id,
  });
  if (res.data.code === 0) {
    message.success("删除成功");
    loadData();
  } else {
    message.error("删除失败");
  }
};

const router = useRouter();

const doUpdate = (question: Question) => {
  router.push({
    path: "/admin/update/question",
    query: {
      id: question.id,
    },
  });
};




// 分页参数
const pagination = computed(() => {
  return {
    current: searchParams.current ?? 1,
    pageSize: searchParams.pageSize ?? 10,
    total: total.value,
    showSizeChanger: true,
    showTotal: (total) => `共 ${total} 条`,
  }
})


// 表格变化处理
const doTableChange = (page: any) => {
  searchParams.current = page.current
  searchParams.pageSize = page.pageSize
  loadData()
}


// 获取数据
const doSearch = () => {
  // 重置页码
  searchParams.current = 1
  loadData()
}
</script>

<style scoped>
#manageQuestionView {
}

.judge-config {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}

.config-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.config-label {
  color: #666;
  min-width: 70px;
}

.config-value {
  color: #1890ff;
  font-weight: 500;
}

.judge-case {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-item {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.case-header {
  background-color: #fafafa;
  padding: 4px 8px;
  font-size: 13px;
  color: #666;
  border-bottom: 1px solid #f0f0f0;
}

.case-content {
  padding: 8px;
}

.case-row {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.case-row + .case-row {
  margin-top: 4px;
}

.case-label {
  color: #666;
  min-width: 42px;
}

.case-value {
  color: #1890ff;
  word-break: break-all;
}
</style>
